import { ThemeMode } from '@ycx/ui';
import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';

interface SettingsState {
  theme: ThemeMode;
  siderCollapsed: boolean;
  actions: () => {
    setTheme: (theme: ThemeMode) => void;
    setSiderCollapsed: (collapsed: boolean) => void;
  };
}

const settings = persist<SettingsState>(
  (set) => ({
    theme: ThemeMode.Light,
    siderCollapsed: false,
    actions: () => {
      return {
        setTheme: (theme) => set({ theme }),
        setSiderCollapsed: (collapsed) => set({ siderCollapsed: collapsed }),
      };
    },
  }),
  {
    name: 'settings',
    storage: createJSONStorage(() => localStorage),
    version: 0,
  },
);

const settingsStore = create(settings);

export const useTheme = () => settingsStore((state) => state.theme);
export const useSiderCollapsed = () => settingsStore((state) => state.siderCollapsed);
export const useSetTheme = () => settingsStore((state) => state.actions().setTheme);
export const useSetSiderCollapsed = () =>
  settingsStore((state) => state.actions().setSiderCollapsed);

export default settingsStore;
